<template>
    <div class="detail-tags">
        <el-tag
            v-for="(tag, i) in props.tags.slice(0, 6)"
            :key="tag"
            class="tag-item custom-tag"
            effect="plain"
            :closable="!props.disabled"
            :disable-transitions="false"
            @close="handleClose(tag, i)">
            {{ tag.name }}
        </el-tag>
        <el-tag v-if="props.tags.length > 6" class="tag-item tag-many" @click="openAddTag()">...</el-tag>
    </div>
</template>
<script lang="ts" setup>
import { withDefaults, defineProps, defineEmits, useAttrs } from 'vue';
import { TagData } from '../interface';
const props = withDefaults(
    defineProps<{
        tags: Array<TagData>;
        disabled: { default: true; type: boolean };
    }>(),
    {}
);
const emit = defineEmits(['open']);
const attrs: any = useAttrs();
const handleClose = (tag: any, i: number) => {
    const updateValue = [...props.tags];
    updateValue.splice(i, 1);
    attrs['onUpdate:tags']?.(updateValue);
};
const openAddTag = () => {
    if (!props.disabled) {
        emit('open');
    }
};
</script>

<style lang="scss" scoped>
.detail-tags {
    line-height: normal;
    margin: 20px -4px 16px;

    /* .custom-tag {
        color: #35383A;
        background: #FFFFFF;
        border: 1px solid #EAEAEA;
    } */
}

.el-tag {
    user-select: none;
    cursor: pointer;
    height: auto;
    line-height: normal;
    padding: 4px 9px;
    background-color: #fffaf9;
    border-radius: 2px;
    border: 1px solid #ffc69e;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #ff6b00;
    margin-right: 4px;
    margin-bottom: 4px;

    &:last-of-type {
        margin-right: 0;
    }

    :deep(.el-tag__close) {
        color: #ff6b00;

        --el-tag-hover-color: rgb(255 107 0 / 10%);
    }
}
</style>
